:
<template>
    <el-card shadow="always" :body-style="{ padding: '0' }">
        <div id="header">
            <!-- logo -->
            <div class="logo">
                <img class="logo-img" src="./image/logo.png" alt="LOGO" />
            </div>
            <!-- 导航 -->
            <div class="nav">
                <router-link to="/home" class="nav-item" :class="{ active: type == 'home' }">
                    资源
                </router-link>
                <router-link to="/course" class="nav-item" :class="{ active: type == 'course' }">
                    课程
                </router-link>
                <router-link to="/trainroom" class="nav-item" :class="{ active: type == '' }">
                    练习室
                </router-link>
                <router-link to="/interflow" class="nav-item" :class="{ active: type == 'interflow' }">
                    交流
                </router-link>
                <router-link to="/center" class="nav-item" :class="{ active: type == 'dynamics' }">
                    我的
                </router-link>
            </div>
            <!-- 右侧 -->
            <div class="right">
                <div class="download">
                    <el-icon class="icon">
                        <Iphone />
                    </el-icon>
                    <span>下载APP</span>
                </div>
                <el-dropdown placement="bottom" size="large">
                    <el-button class="publish" round color="#f93684" size="small" :icon="Plus">
                        发布
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu style="padding: 0">
                            <el-dropdown-item disabled :style="groupStyle">
                                发布资源
                            </el-dropdown-item>
                            <el-dropdown-item :style="itemStyle">作品</el-dropdown-item>
                            <el-dropdown-item :style="itemStyle">教程</el-dropdown-item>
                            <el-dropdown-item :style="itemStyle">动态</el-dropdown-item>
                            <el-dropdown-item disabled :style="groupStyle">
                                发布商品
                            </el-dropdown-item>
                            <el-dropdown-item :style="itemStyle">视频课</el-dropdown-item>
                            <el-dropdown-item :style="itemStyle">线下课</el-dropdown-item>
                            <el-dropdown-item :style="itemStyle">直播课</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <router-link v-if="!userBaseInfoStore.token" to="/login" class="avatar" @click="visible = true">
                </router-link>

                <el-popconfirm confirm-button-text="确认" v-else cancel-button-text="取消" icon="InfoFilled"
                    @confirm="logout" icon-color="#626AEF" title="确认要退出吗?">
                    <template #reference>
                        <div class="avatar" @click="visible = true"></div>
                    </template>
                </el-popconfirm>
            </div>
        </div>
    </el-card>
</template>

<script lang="ts">
export default {
    name: 'Header',
};
</script>

<script setup lang="ts">
import userBaseInfo from '@/store/modules/login';
import { useRoute } from 'vue-router';
import { ref, watch } from 'vue';
import { Plus, Iphone } from '@element-plus/icons-vue';
import { ElButton, ElMessage } from 'element-plus';
import router from '@/router';
const visible = ref(false);
const userBaseInfoStore = userBaseInfo();
const logout = async () => {
    try {
        await userBaseInfoStore.logout();
        userBaseInfoStore.userInfo = {
            password: '',
            token: '',
            phone: '',
        };
        localStorage.removeItem('TOKEN');
        ElMessage({
            type: 'success',
            message: '退出成功',
        });
        router.push('/');
    } catch (error) {
        ElMessage.error('退出失败');
    }
};

// 动态css
const itemStyle = ref({
    'border-bottom': '1px solid #e3e3e3',
    padding: '7px 22px',
    'justify-content': 'center',
});
const groupStyle = ref({
    color: '#111',
    width: '140px',
    height: '30px',
    'justify-content': 'center',
    background: '#e3e3e3',
    cursor: 'text',
});

const route = useRoute();
const type = ref('');
const title = ref('');
watch(
    route,
    (nval, oval) => {
        type.value = nval.meta.type as string;
        title.value = nval.meta.name as string;
    },
    { immediate: true }
);
</script>

<style lang="less" scoped>
#header {
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    // logo区域
    .logo {
        margin-right: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .logo-img {
            width: 128px;
            height: 30px;
        }
    }

    // 导航区
    .nav {
        display: flex;

        .nav-item {
            padding: 12px 10px;
            font-size: 18px;
            margin-left: 40px;
            cursor: pointer;

            &.active {
                color: #f93684;
            }
        }

        & :first-child {
            margin-left: 0;
        }
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .download {
            font-size: 16px;
            margin-right: 30px;
            color: #101010;
            display: flex;
            align-items: center;
        }

        .publish {
            font-size: 16px;
            width: 75px;
            height: 30px;
        }

        .item {
            &:hover {
                background: #e3e3e3;
            }
        }

        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-left: 30px;
            background: url(https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1);
            background-size: contain;
        }
    }
}

.dialog-footer button:first-child {
    margin-right: 10px;
    //   display: flex;
    // flex-direction: row;
    // justify-content: space-between;
}
</style>
